<template>
  <router-view>
    <div class="app-body">
      <img :src="cover" class="cover">
      <div class="cells">
        <div class="cell">
          <div class="cell-bd">
            <h2>以茶会友-普洱高端品鉴会</h2>
            <p>活动时间：06-29 19:00至06-29 21:00</p>
          </div>
        </div>
        <div class="cell">
          <div class="cell-bd">上海市浦东新区金科路300号</div>
          <div class="cell-ft"><icon id="location"></icon>2.3km</div>
        </div>
        <div class="cell">
          <div class="cell-bd">
            <div><strong>人数：</strong>已报名6人/限8人报名</div>
            <p>参与人数需达到6人活动才举行</p>
          </div>
        </div>
      </div>

      <div class="block">
        <h3>组织者</h3>
        <div class="user">
          <img :src="avatar">
          <div class="user-bd">
            <h3>水果糖</h3>
            <p>功夫茶之隆情，使其茶艺超凡“入俗”。工夫茶的雅趣，让品茶者难得清闲，乐于赋闲。</p>
          </div>
        </div>
      </div>
      <div class="block">
        <h3>活动详情</h3>
        <img :src="detail">
        <p>如果你无法简洁的表达你的想法，那只说明你还不够了解它——阿尔伯特.爱因斯坦</p>
      </div>
      <div class="block">
        <h3>环境展示</h3>
        <img :src="cover">
        <img :src="detail">
      </div>
    </div>
    <div class="footer">
      <div class="footer-bd">费用：<em>200.00</em></div>
      <a class="footer-btn" @click="preOrder">报名</a>
    </div>
    <activity-order ref="activityOrder" @submit="submit"></activity-order>
  </router-view>
</template>

<script>
import ActivityOrder from '@/components/ActivityOrder'

import cover from '@/assets/img/tmp/cover.jpg'
import detail from '@/assets/img/tmp/detail.jpg'
import avatar from '@/assets/img/tmp/avatar.jpg'

export default {
  data () {
    return {
      cover,
      detail,
      avatar
    }
  },
  methods: {
    preOrder () {
      this.$refs.activityOrder.show = 1
    },
    submit ({ name, tel }) {
      this.$router.push('/activity/pre-order')
    }
  },
  components: {
    ActivityOrder
  }
}
</script>

<style lang="scss" scoped>
.app-body {
  padding-bottom: 1em;
}

.cover {
  width: 100%;

  + .cells {
    margin-top: 0;
  }
}

.cells {
  font-size: 14px;
}

.cell-ft .icon {
  font-size: 20px;
  vertical-align: -.2em;
  color: $color;
}

.user {
  $avatar-size: 3em;
  padding: 1em;

  // avatar
  img {
    float: left;
    width: $avatar-size;
    height: $avatar-size;
    border-radius: 100%;
    overflow: hidden;
  }

  &-bd {
    margin-left: $avatar-size;
    padding-left: 1em;

    > h3 {
      margin: 0;
      line-height: 1;
      font-weight: 400;
      font-size: 16px;
    }

    > p {
      margin: .5rem 0 0;
      color: $color-gray;
      font-size: 12px;
    }
  }
}
</style>
